<template>
	<view class="main">
		
		<view class="main-text"> 选择你的性别 </view>
		<view class="second-text">给你推荐优质的异性嘉宾</view>
		
		<view class="image-view">
			<image src="../../static/images/male.png" mode="widthFix"></image>
			<image src="../../static/images/female.png" mode="widthFix"></image>
		</view>
		
		<radio-group @change="changeSex">
			<view class="choose-bt">
					<view :class="sex == 0 ? 'choose-active' : ''"><radio checked value="0" color="#7AE8D1"></radio>男生</view>
					<view :class="sex == 1 ? 'choose-active' : ''"><radio value="1" color="#7AE8D1"></radio>女生</view>
			</view>
		</radio-group>
		
		<view class="warn-text">注意：注册成功后性别将不可修改</view>
		
		<view class="next-bt" @tap="navigateToPosition">下一步</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				sex: 0,
			}
		},
		methods: {
			changeSex(e){
				this.sex = e.detail.value;
			},
			navigateToPosition(){
				uni.navigateTo({
					url: "./birthday?sex=" + this.sex
				})
			}
		}
	}
</script>

<style lang="scss" scoped>

.main-text{
	font-size: 40rpx;
	font-weight: bold;
	margin-top: 200rpx;
	text-align: center;
}
.second-text{
	margin-top: 20rpx;
	font-size: 28rpx;
	text-align: center;
	color: #515151;
}
.image-view{
	display: flex;
	margin-top: 100rpx;
	justify-content:center;
	width: 100%;
	image{
		width: 200rpx;
		margin-right: 50rpx;
		margin-left: 50rpx;
		border-radius: 30rpx;
	}
}
.choose-bt{
	display: flex;
	margin-top: 10rpx;
	justify-content:center;
	width: 100%;
	.choose-active{
		border: 5rpx solid #7AE8D1;
	}
	view{
		border: 5rpx solid #E9E9E9;
		font-size: 28rpx;
		margin-right: 50rpx;
		margin-left: 50rpx;
		width: 200rpx;
		text-align: center;
		padding-top: 20rpx;
		padding-bottom: 20rpx;
		border-radius: 100rpx;
	}
}
.warn-text{
	margin-top: 50rpx;
	text-align: center;
	color: #515151;
	font-size: 28rpx;
}
.next-bt{
	position: fixed;
	bottom: 100rpx;
	width: 500rpx;
	margin: auto;
	left: 0;
	right: 0;
	text-align: center;
	font-weight: bold;
	height: 80rpx;
	line-height: 80rpx;
	border-radius: 50rpx;
	background-color: #7AE8D1;
}
</style>
